<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../static/img/logo.png">
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/popper.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../static/js/getNavList.js"></script>
	<script type="text/javascript" src="../../static/js/notification.js"></script>
	<script type="text/javascript" src="../../static/js/qrcode.min.js"></script>
	<script type="text/javascript" src="../../static/js/clipboard.min.js"></script>
	<script type="text/javascript">
        var timestamp = new Date().getTime();
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = './kf.js?v=' + timestamp;
        document.head.appendChild(script);
    </script>
</head>
<body>

<div id="app">
	
	<!-- 左侧 -->
	<div class="left">
		<div class="dhview">

			<!-- LOGO -->
			<a href="../index/" class="index">
			    <div class="logo"></div>
			</a>

			<!-- 导航 -->
			<ul id="navList"></ul>

			<!-- 账号 -->
			<div class="account">加载中...</div>
		    
		</div>
	</div>

	<!-- 右侧 -->
	<div id="right">
	    
		<h3>活码 ➜ <span class="mbx">客服码</span></h3>
		<div class="data-card">
		    
			<!-- 按钮区域 -->
			<div class="button-view" id="button-view" style="display:none;">
			    
			    <!--flex布局按钮容器-->
			    <div class="flex-button-view">
			        
    			    <!--导航-->
    			    <div class="button-daohang">
    			        <a href="../qun/"><button class="tint-btn">群活码</button></a>
    			        <a href="../kf/"><button class="default-btn" style="margin-left: 5px;">客服码</button></a>
    				    <a href="../channel/"><button class="tint-btn" style="margin-left: 5px;">渠道码</button></a>
    			    </div>
    			    
    			    <!--功能-->
    			    <div class="button-gongneng">
    			        
    			        <button 
		    	    	class="tint-btn" 
			         	data-toggle="modal" 
		    	    	data-target="#createKfModal" 
			        	onclick="getDomainNameList('creat')">创建客服码</button>
    			    </div>
			    </div><!-- flex-button-view -->
			</div>

			<!-- 数据列表 -->
			<div class="data-list">
				<table class="table">
				    <thead></thead>
				    <tbody></tbody>
				</table>
			</div><!-- data-list -->
			
			<!--未加载到数据时显示-->
			<p class="loading" style="display: none;"></p>
			
			<!-- 分页 -->
			<div class="fenye"></div>
			
		</div><!-- data-card -->
	</div><!-- right -->

	<!-- 创建客服码 -->
    <div class="modal fade" id="createKfModal">
        <div class="modal-dialog">
            <div class="modal-content" style="width:650px;">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">创建客服码</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                    
                <!-- 表单 -->
                <div class="modal-body">
                    <form id="createKf">
                    <span class="text">标题</span>
                    <input type="text" name="kf_title" class="form-control" autocomplete="off" placeholder="标题或客服昵称">
                    
                    <div style="width:100%;height:70px;margin:-10px auto 20px;display:flex;">
                        <div style="flex:1;margin-right:7px;">
                            <span class="text">短链域名</span>
                            <select name="kf_dlym" class="form-control" title="短链域名"></select>
                        </div>
                        <div style="flex:1;margin-right:7px;">
                            <span class="text">入口域名</span>
                            <select name="kf_rkym" class="form-control" title="入口域名"></select>
                        </div>
                        <div style="flex:1;">
                            <span class="text">落地域名</span>
                            <select name="kf_ldym" class="form-control" title="落地域名"></select>
                        </div>
                    </div>
                    
                    <span class="text">展示模式</span>
                    <select name="kf_model" class="form-control" title="到阈值切换还是随机切换二维码？">
                        <option value="2">随机模式</option>
                        <option value="1">阈值模式</option>
                    </select>
                    
                    <!--在线时间Json配置-->
                    <textarea class="form-control" name="kf_onlinetimes" id="onlineTimesJsonString"></textarea>
                    
                    </form>
                </div><!-- modal-body -->
                    
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                        <div class="faqnav" title="阅读使用指南">
                            <span class="faq"><a href="../faq.php?faq=kf" target="_blank">?</a></span>
                        </div>
                        <div class="btnnav">
                            <button type="button" class="default-btn" onclick="createKf();">立即创建</button>
                        </div>
                    </div>
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- createKfModal -->
  	
  	<!-- 编辑客服码 -->
    <div class="modal fade" id="EditKfModal">
        <div class="modal-dialog">
            <div class="modal-content" style="width:650px;">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">编辑客服码</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 表单 -->
                <div class="modal-body">
                <form id="editKf" enctype="multipart/form-data">
                <span class="text">标题</span>
                <input type="text" name="kf_title" class="form-control" autocomplete="off" placeholder="标题或客服昵称">
                
                <span class="text">备注信息</span>
                <textarea name="kf_beizhu" class="form-control" rows="3" autocomplete="off" placeholder="客服简介、加微信要求等（可空）"></textarea>
                
                <div style="width:100%;height:70px;margin:-5px auto 20px;display:flex;">
                    <div style="flex:1;margin-right:7px;">
                        <span class="text">短链域名</span>
                        <select name="kf_dlym" class="form-control" title="短链域名"></select>
                    </div>
                    <div style="flex:1;margin-right:7px;">
                        <span class="text">入口域名</span>
                        <select name="kf_rkym" class="form-control" title="入口域名"></select>
                    </div>
                    <div style="flex:1;">
                        <span class="text">落地域名</span>
                        <select name="kf_ldym" class="form-control" title="落地域名"></select>
                    </div>
                </div>

                <div class="form-control-group">
                    <div class="form-group">
                        <span class="text">展示模式</span>
                        <select name="kf_model" class="form-control"></select>
                    </div>
                    
                    <div class="form-group">
                        <span class="text">在线状态</span>
                        <select name="kf_online" class="form-control" title="开启后根据下方在线时间显示在线状态"></select>
                    </div>
                    
                    <div class="form-group-right">
                        <span class="text">安全提示</span>
                        <select name="kf_safety" class="form-control" title="顶部扫码安全提示"></select>
                    </div>
                </div>
                
                <!--在线时间Json配置-->
                <span class="text">在线时间配置</span>
                <textarea class="form-control" name="kf_onlinetimes" rows="7" title="1-7代表星期一至星期日，morning、afternoon、evening代表上午、下午、晚上的在线时间段！设置00:00-00:00代表全时段不在线！"></textarea>
                
                <!--隐藏域，用于传参-->
                <input type="hidden" name="kf_id">
                </form>
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    	<div class="faqnav" title="阅读使用指南">
                    	    <span class="faq"><a href="../faq.php?faq=kf" target="_blank">?</a></span>
                    	</div>
                    	<div class="btnnav">
                    	    <button type="button" class="default-btn" onclick="editKf();">提交更新</button>
                    	</div>
                    </div>
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- EditKfModal -->
  	
  	<!-- 确定删除客服码 -->
    <div class="modal fade" id="delKfModal">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除客服码</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 内容 -->
                <div class="modal-body">
                    将会删除该客服码及其所有客服二维码！
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer"></div>
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- delKfModal -->
    
    <!-- 确定删除客服二维码 -->
    <div class="modal fade" id="DelKfQrcode">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除客服二维码</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 内容 -->
                <div class="modal-body">
                    将会删除该客服二维码且无法恢复！
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer"></div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- DelKfQrcode -->
  	
  	<!--客服二维码管理-->
    <div class="modal fade" id="kfQrcodeListModal">
        <div class="modal-dialog" style="max-width:930px;">
            <div class="modal-content">
                
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span id="kfQrcodeList_Pannel_Title"></span>
                    </h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="btn-view">

                        <div class="upload-Btn-Group">
                            <button type="button" class="default-btn local">
                                <span>+ 上传二维码</span>
                                <form id="uploadKfQrcodeForm" enctype="multipart/form-data">
                                    <input type="file" name="file" class="fileSelectBtn" accept="image/*" id="uploadKfQrcode" />
                                    <input text="text" name="kf_id" id="uploadKfQrcode_kf_id" style="display:none;" />
                                </form>
                            </button>
                            <button type="button" class="default-btn sucaiku" onclick="getSuCai('1','kfQrcodeListModal')">
                                <span>+ 从素材库选择</span>
                            </button>
                        </div>
                        
                    </div>
                    
                    <!-- 客服二维码列表 -->
                    <div class="kfQrcodeList">
                        <table class="table">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    
                    <!--加载不到列表的时候展示-->
                    <p class="loading" style="display: none;"></p>
                    
                </div>
                
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    	<div class="faqnav" title="阅读使用文档">
                    	    <span class="faq"><a href="../faq.php?faq=kf" target="_blank">?</a></span>
                    	</div>
                    	<div class="btnnav">
                    	    <button type="button" class="default-btn" data-dismiss="modal">关闭</button>
                    	</div>
                    </div>
                </div>
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div>
        </div>
    </div><!-- kfQrcodeListModal -->
    
    <!-- 编辑客服二维码 -->
    <div class="modal fade" id="EditKfQrcodeModal">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">编辑客服二维码</h4>
                    <button type="button" class="close" onclick="hideEditKfQrcodeModal();">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 表单 -->
                <div class="modal-body">
                <form id="editKfQrcode" enctype="multipart/form-data" title="温馨提示：点击右上角&times;可返回二维码列表">
                    <span id="zm_yz_input" style="display:none;">
                        <span class="text">阈值</span>
                        <input type="text" name="zm_yz" class="form-control" autocomplete="off" id="zm_yz_edit" placeholder="设置阈值">
                    </span>
                    
                    <span class="text">客服微信号</span>
                    <input type="text" name="zm_num" class="form-control" autocomplete="off" id="zm_num" placeholder="客服微信号">
                    
                    <!--上传控件-->
                    <span class="upload_file">
                    	<div class="upload_qrcode">
                    	    <input type="file" class="file_input" name="file" accept="image/*" id="selectKfQrcode" />
                    	    <img src="../../static/img/uploadIcon.png" class="upload_icon" />
                    	</div>
                    	<p class="upload_text">上传客服二维码</p>
                    </span>
                    
                    <!--二维码图片预览-->
                    <div class="qrcode_preview"></div>
                    
                    <!--隐藏域，用于传参-->
                    <input type="hidden" name="zm_id" id="zm_id_edit">
                    <input type="hidden" name="kf_model" id="kf_model_editzm">
                    <input type="hidden" name="zm_qrcode" id="zm_qrcode_edit">
                </form>
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    	<div class="faqnav" title="阅读使用文档">
                    	    <span class="faq"><a href="../faq.php?faq=kf" target="_blank">?</a></span>
                    	</div>
                    	<div class="btnnav">
                    	    <button type="button" class="default-btn" onclick="editKfQrcode();">提交更新</button>
                    	</div>
                    </div>
                </div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- EditKfQrcodeModal -->
    
    <!-- 分享客服码 -->
    <div class="modal fade" id="shareKf">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">分享客服码</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                
                <!-- 表单 -->
                <div class="modal-body">
                    <div class="box">
                        <div class="longUrl"><span class="text">长链接：</span><span id="longUrl"></span></div>
                        <div class="shortUrl"><span class="text">短链接：</span><span id="shortUrl"></span></div>
                        <div class="Qrcode" id="shareQrcode"></div>
                    </div>
                </div><!-- modal-body -->
                
                <!-- 底部操作 -->
                <div class="modal-footer"></div><!-- modal-footer -->
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- shareKf -->
    
    <!--素材库-->
    <div class="modal fade" id="suCaiKu">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                
                <!-- 头部 -->
                <div class="modal-header" title="点击右上角&times;可返回二维码列表">
                    <h4 class="modal-title">素材库</h4>
                    <span class="hideSuCaiPannel_closeIcon"></span>
                </div>
                
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="sucai-upload">
                        <button type="button" class="default-btn upload_sucai_button">
                            <span>上传素材</span>
                            <form id="uploadSuCaiTosuCaiKuForm" enctype="multipart/form-data">
                                <input type="file" name="file" class="upload_sucai" accept="image/*" id="uploadSuCaiTosuCaiKu" />
                                <input text="text" name="kf_id" id="upload_sucai_kfid" style="display:none;" />
                                <input text="text" name="upload_sucai_fromPannel" style="display:none;" />
                            </form>
                        </button>
                    </div>
                    
                    <!--素材容器-->
                    <div class="sucai-view"></div>
                    
                    <!--分页-->
                    <div class="fenye"></div>
                </div>
                
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <div class="footer-btn">
                    	<div class="faqnav" title="阅读使用指南">
                    	    <span class="faq"><a href="../faq.php?faq=qun" target="_blank">?</a></span>
                    	</div>
                    	<div class="btnnav">
                    	    <button type="button" class="default-btn" data-dismiss="modal" onclick="hideSuCaiPannel()">取消</button>
                    	</div>
                    </div>
                </div>
                
                <!-- 操作反馈 -->
                <div class="result"></div>
                
            </div>
        </div>
    </div><!-- suCaiKu -->
    
</div><!-- app -->


<script type="text/javascript">

    // 注册上传函数
    function handleQrcodeUpload() {
        
        // 上传客服二维码
        $("#uploadKfQrcode").change(function(e){
            
            // 获取选择的文件
            var fileSelect = e.target.files;
            if(fileSelect.length>0){
                
                // file表单数据
                var imageData = new FormData(document.getElementById("uploadKfQrcodeForm"));
                
                // kf_id
                var kf_id = $("#uploadKfQrcode_kf_id").val();
                
                // 异步上传
                $.ajax({
                    url:"./uploadKfQrcode.php",
                    type:"POST",
                    data:imageData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        
                        if(res.code == 200){
                            
                            // 上传成功
                            // 刷新客服二维码列表
                            refreshKfQrcodeList(kf_id)
                        }else{
                            
                            // 上传失败
                            showErrorResult(res.msg)
                        }
                        
                    },
                    error: function() {
                        
                        // 上传失败
                        showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看uploadKfQrcode.php的返回信息进行排查！')
                    }
                })
            }
        })
        
        // 编辑客服二维码
        $("#selectKfQrcode").change(function(e){
            
            // 获取选择的文件
            var fileSelect = e.target.files;
            if(fileSelect.length>0){
                
                // file表单数据
                var imageData = new FormData(document.getElementById("editKfQrcode"));
                
                // 异步上传
                $.ajax({
                    url:"../upload.php",
                    type:"POST",
                    data:imageData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        
                        if(res.code == 200){
                            
                            // 上传成功
                            $('#zm_qrcode_edit').val(res.url);
                            $('#EditKfQrcodeModal .modal-body .upload_file').css('display','none');
                            $('#EditKfQrcodeModal .modal-body .qrcode_preview').css('display','block');
                            
                            // 显示上传成功的图片及文字
                            $('#EditKfQrcodeModal .modal-body .qrcode_preview').html(
                                '<img src="'+res.url+'" class="qrcode" />' +
                                '<p class="uploadSuccess">上传成功</p>'
                            );
                            
                        }else{
                            
                            // 上传失败
                            showErrorResult(res.msg)
                        }
                        
                    },
                    error: function() {
                        
                        // 上传失败
                        showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看upload.php的返回信息进行排查！')
                    }
                })
                
                // 清空file选择
                $("#selectKfQrcode").val('');
            }
        })
        
        // 上传至素材库
        $("#uploadSuCaiTosuCaiKu").change(function(e){
            
            // 获取选择的文件
            var fileSelect = e.target.files;
            if(fileSelect.length>0){
                
                // file表单数据
                var imageData = new FormData(document.getElementById("uploadSuCaiTosuCaiKuForm"));
                
                // 获取kfid
                var kfid = $('#upload_sucai_kfid').val();
                
                // 获取fromPannel
                var fromPannel = $('#suCaiKu input[name="upload_sucai_fromPannel"]').val();
                
                // 异步上传
                $.ajax({
                    url:"../public/uploadToSuCaiKu.php",
                    type:"POST",
                    data:imageData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        
                        if(res.code == 200){
                            
                            // 上传成功
                            // 重新获取素材列表
                            getSuCai(1,fromPannel);
                        }else{
                            
                            // 上传失败
                            showErrorResult(res.msg)
                        }
                        
                        // 清空file控件的选择
                        $('#uploadSuCaiTosuCaiKu').val('');
                    },
                    error: function() {
                        
                        // 上传失败
                        showErrorResultForphpfileName('uploadToSuCaiKu.php');
                    }
                })
            }
        })
    }
    
    handleQrcodeUpload();

</script>

</body>
</html>